<template>
  <div class="password-input">
    <slot/>
    <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true" />
    <div class="forgotPassword" @click="forgotPassword">忘记密码?</div>
    <van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" />
  </div>
</template>
<script>
export default {
  name: 'JPasswordInput',
  data () {
    return {
      value: '',
      showKeyboard: true
    };
  },
  props: {

  },
  computed: {
  },
  mounted () {
  },
  methods: {
    forgotPassword () {
      this.$store.dispatch('setPayPassword', false);
      this.$router.push({ path: '/password/edit', query: { type: 2 } });
    },
    onInput (key) {
      this.value = (this.value + key).slice(0, 6);
      // 密码6位时验证
      if (this.value.length === 6) {
        this.$emit('change', this.value);
        this.value = '';
      }
    },
    onDelete () {
      this.value = this.value.slice(0, this.value.length - 1);
    }
  }
};
</script>
<style lang="less" scoped>
.password-input {
  .van-password-input {
    margin: 20px 52px 0;
  }
  .forgotPassword {
    color: #28a2e5;
    font-size: 28px;
    text-align: center;
    padding: 20px 20px 30px;
  }
  .van-password-input__security i {
    width: 20px;
    height: 20px;
  }
  .van-password-input__security li {
    height: 100%;
    font-size: 40px;
    line-height: 110px;
    border-width: 1px; /*no*/
    border-color: #d3d4d4;
    border-style: solid;
    margin-left: -1px; /*no*/
  }
  .van-password-input__security {
    height: 109px;
  }
  .van-hairline-j--left::after {
    display: none;
  }
  .van-hairline-j--surround::after {
    border-width: 1px; /*no*/
    border-color: #d3d4d4;
    display: none;
  }
  .van-key {
    height: 108px;
    font-size: 48px;
    font-style: normal;
    line-height: 108px;
  }
}
</style>
